<template>
	<view>
		
		<!--header-->
		<view class="app-header-box">
			
			<div class="pm-type">
				<view class="name" :style="{'border-bottom':pm == 0?'1px solid #FF7104':'','color':pm == 0?'#FF7104':''}" @click="switchTab(0)">全部</view>
				<view class="name" :style="{'border-bottom':pm == 1?'1px solid #FF7104':'','color':pm == 1?'#FF7104':''}" @click="switchTab(1)">收入</view>
				<view class="name" :style="{'border-bottom':pm == 2?'1px solid #FF7104':'','color':pm == 2?'#FF7104':''}" @click="switchTab(2)">支出</view>
			</div>
			
			<view class="pick-time">
				<view class="pick-time-detail">
					<picker mode="date" :value="date"  @change="bindDateChange" fields='month'>
					    <view class="uni-input">{{date}}</view>
					 </picker>
					<image :src="img_url+'/upstrong.png'" mode=""></image>
				</view>
				<view style="float: right;height: 85rpx;margin-right: 30rpx;" @click="reset">
					<text style="display: block;width: 100rpx;height: 60rpx;background:#FF7104;text-align: center;line-height: 60rpx;
					margin-top: 15rpx;color: #fff;border-radius: 15rpx;">重置</text>
				</view>
			</view>
		</view>
		
		
		<!--header-->
		<view class="items">
			<view class="item" v-for="(item, i) in dataList" :key="i">
				
				<view style="width: 100%;">
					<view style="display: flex;justify-content: space-between;align-items: center;">
						<view>{{item.body}}</view>
						<view v-if="item.pm == 1" style="color: #008000;font-size: 12pt;">+{{(item.amount / 100).toFixed(2)}}</view>
						<view v-if="item.pm == 2" style="color: #aa0000;font-size: 12pt;">-{{(item.amount / 100).toFixed(2)}}</view>
					</view>
					
					<view class="user-data" style="padding: 0 20rpx;">
						<view style="display: flex;align-items: center;">
							<view>
								<image v-if="item.pay_user.avatar_url" :src="item.pay_user.avatar_url" mode="aspectFill" class="acatar"></image>
								<image v-else src="/static/icon/default-avatar.png" mode="aspectFill" class="acatar"></image>
							</view>
							<view class="name-datetime">
								<view class="name">
									<view class="name-text">{{item.pay_user.nickname}}</view>
									<!-- <view class="id" :style="{color: '#FF7104',border:'1px solid'+'#FF7104'}">ID:{{item.order_user.user_id}}</view> -->
								</view>
								<view class="tel">
									{{item.pay_user.mobile}}
									<span class="iconfont icon-dianhua3"></span>
								</view>
							</view>
						</view>
						<view class="order-data">
							<view>订单金额：￥{{(item.amount / 100).toFixed(2)}}</view>
						</view>
					</view>
					<view style="display: flex;justify-content: space-between;">
						<view>{{formatTimeToStr(item.created_at)}}</view>
						<view>剩余：{{(item.data_json.after_balance / 100).toFixed(2)}}</view>
					</view>
					
				</view>

			</view>
			<main-loadmore :visible="loadding" :index="3" type="red"></main-loadmore>
			<main-nomore :visible="!pullUpOn" bgcolor="#fafafa"></main-nomore>
		</view>
		
		<view class="items" v-if='dataList.length==0'>
			<text style="display: block;width: 100%;overflow: hidden;text-align: center;font-size: 24rpx;margin-top: 50rpx;color: #999;">-----&nbsp;&nbsp;&nbsp;没有更多了&nbsp;&nbsp;&nbsp;----</text>
		</view>

	</view>
	
	
</template>

<script>
	import {formatTimeToStr} from "@/utils/date";
	export default {
		data(){
			return {
				pm: 0,
				date: '日期筛选',
				dataList: [],
				page: 1,
				created_at:'',
				requestFlag:false,
				defaultAvatar:'/static/icon/default-avatar.png',
				pullUpOn:true,
				loadding:false,
				img_url: this.$api.img_url,
			}
		},
		onLoad(opt){
			this.getDateList();
		},
		computed:{
			formatTimeToStr(){
				return value => formatTimeToStr(value * 1000)
			}
		},
		methods:{
			switchTab(sub) {
				let self = this;
				self.pm = sub;
				self.page = 1;
				self.dataList = [];
				self.getDateList()
			},
			bindDateChange: function(e) { //点击选择年月
				let time=e.target.value		
			    this.date = time.split('-')[0]+'年'+time.split('-')[1]+'月'
				this.created_at = time
				this.page=1
				this.dataList=[]
				this.getDateList()			
			},
			reset(){//重置
				this.page=1
				this.dataList=[]
				this.created_at=''
				this.date='日期筛选'
				this.getDateList()	
			},
			async getDateList(){
				let self = this;
				if( self.flag ) return
				self.flag = true
				let res = await self.$http.request({
					url:self.$api.hxt.hxtAccountLogs,
					method:'post',
					data: {
						page:self.page,
						pm:self.pm,
						created_at:self.created_at,
					},
					showLoading: true,
				});
				self.flag = false
				if( res.code != 0 ){
					self.$http.toast(res.msg);
					return;
				}
				let list = res.data.list;
				if( list.length == 0 ) return false;
				self.dataList = self.dataList.concat(list)
				self.page_count= res.data.pagination.page_count;
			}
		},
		onReachBottom() {
			
			//只是测试效果，逻辑以实际数据为准
			this.loadding = true
			this.pullUpOn = true
					
			setTimeout(() => {
				this.loadding = false
				if(this.page >= this.page_count){
					this.pullUpOn = false;
					return false;
				} 	
				this.page++;
				this.getDateList();
			}, 1000)
		}
	}
</script>

<style lang="scss" scoped>
	.pm-type{
		display: flex;
		line-height: 60rpx;
		justify-content: space-around;
		background-color: #fff;
		position: fixed;
		top: 80rpx;
		width: 100vw;
		z-index: 1;
	}
	.pm-type view{
		padding: 10rpx 20rpx;
	}
	.pick-time{width: 100%;height: 95rpx;background: rgb(244,244,244);margin-top: 80rpx;}
	.pick-time-detail{width: 300rpx;height: 60rpx;float: left;margin: 20rpx 30rpx;border-radius: 15rpx;color: #000;position: relative;}
	.pick-time-detail image{display: block;width: 36rpx;height: 36rpx;position: absolute;top: 7rpx;left: 185rpx;}
	
	
	.items {
		width: 100%;
		display: flex;
		padding: 0 10rpx;
		box-sizing: border-box;
		flex-direction: column;
	
		.item {
			display: flex;
			font-size: 9pt;
			padding: 10rpx 0;
			border-bottom: 2rpx solid #cccccc;
	
			.item-left {
				flex: 1;
				max-width: 70%;
	
				.desc {
					overflow:hidden;  
					text-overflow:ellipsis;  
					white-space: normal;  
					display:-webkit-box;  
					-webkit-box-orient:vertical;  
					-webkit-line-clamp:3;/*规定最多显示两行*/ 
					font-size: 10pt;
				}
				.date-time {
					color: #bdbdbd;
					font-size: 10pt;
				}
			}
	
			.item-right {
				flex: 1;
				text-align: end;
				.update {
					&.add {
						color: #bc0100;
					}
				}
				.sum {
					color: #bc0100;
				}
			}
		}
	}

	.user-data{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
	}	
	.acatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 16rpx;
	}

</style>